<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/homePage/accounts.css" />
		<link rel="stylesheet" type="text/css" href="../../css/global/index.css" />
		<link rel="stylesheet" href="../../css/iconfont.css">
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugin/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugin/flexible_css.debug.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body class="bg-c4">
		<section class="heade">
			<div class="pd">
				<div class="search-wrap">
					<i class="mui-icon mui-icon-arrowleft mui-action-back "><span class="sy">首页</span></i>
					<input type="text" placeholder="搜索">
					<i class="mui-icon mui-icon-search"></i>
					<a href="#picture" class="right-icon">
						<i class="iconfont icon-gengduo"></i>
					</a>
				</div>
			</div>
		</section>
		<section class="container">
			<div class="container-heade" data-href="../../html/homePage/girokonto.html">
				<div class="photo">
					<img src="../../images/home/inform-left.png" alt="">
				</div>
				<h2>转到速付宝账户</h2>
				<p>安全 免费 到账快</p>
			</div>
			<div class="container-content">
				<div class="title">
					<span>最近</span>
					<div>
						<span>全部朋友</span>
						<i class="mui-icon mui-icon-arrowright"></i>
					</div>
				</div>
				<ul>
					<li>
						<img src="../../images/friend/txl-photo.png" alt="">
						<div class="li-right">
							<h3>刘德华</h3>
							<p>151*****1122</p>
						</div>
					</li>
					<li>
						<img src="../../images/friend/txl-photo.png" alt="">
						<div class="li-right">
							<h3>刘德华</h3>
							<p>151*****1122</p>
						</div>
					</li>
					<li>
						<img src="../../images/friend/txl-photo.png" alt="">
						<div class="li-right">
							<h3>刘德华</h3>
							<p>151*****1122</p>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<section id="picture" class="mui-popover mui-popover-action mui-popover-bottom bg-c3">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">转账记录</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">使用帮助</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#picture">取消</a>
				</li>
			</ul>
		</section>

	</body>
	<script src="../../js/homePage/accounts.js"></script>
	<script src="../../js/plugin/template.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		// var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			// info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
	</script>
</html>
